<template>
  <div>
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b" :router="true" :unique-opened="true" :default-active="this.$route.path">
      <el-submenu :index="item.permissionUrl" v-for="(item, index) in MenuList" :key="index">
        <template slot="title">
          <span>{{ item.permissionName }}</span>
        </template>
        <el-menu-item :index="item.permissionUrl" v-show="item.children.length === 0">
          <span slot="title">{{ item.permissionName }}</span>
        </el-menu-item>
        <!-- 一组菜单项 -->
        <el-menu-item-group>
          <el-menu-item :index="ChildItem.permissionUrl" v-for="(ChildItem, ChildIndex) in item.children"
            :key="ChildIndex">{{ ChildItem.permissionName }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getRoleList } from '@/api/api'

export default {
  data () {
    return {
      MenuList: [],
      userId: this.$store.state.userId,
      currentUrl: ''
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
      this.currentUrl = keyPath[0]
      // console.log(this.currentUrl)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
      this.currentUrl = keyPath[0]
      // console.log(this.currentUrl)
    }
  },
  mounted () {
    getRoleList().then(res => {
      // console.log(res.data)
      this.MenuList = res.data.data
    })
  }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  position: fixed;
  height: 100%;
  width: 200px;
}
</style>
